<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue基础——实例对象</title>
</head>
<body>
  <!-- 原生DOM操作 -->
  <div id="show">
    <p id="one"></p>
    <p id="two"></p>
  </div>

  <hr />

  <!-- 3. 构建一个视图  view-->
  <div id="app">
    <!-- 通过 指令的方式 （视图模板语法） -->
    <p>{{ msg }}</p>
    <h2>{{ msg }}</h2>
    <h4>{{ msg }}</h4>
    <h3>{{ count + 1 }}</h3>
    <p>{{ ok ? "Yes":"No" }}</p>
    <p>字符串翻转结果: {{ message.split('').reverse().join('') }}</p>
    <!-- 以下情景 是不会被  Vue的 插值表达式进行解析 -->
    <!-- <p>{{ var a = 100 }}</p>
    <p>{{ if (true) {retrun message} }}</p> -->
  </div>
  
</body>
<!-- 1. 引入 vue.js 文件 -->
<script src="./src/vue.js"></script>
<script>
  // 原生JS DOM操作
  let show = document.querySelector("#one");
  let show2 = document.querySelector("#two");
  let msg = "hello world";
  show.innerHTML = msg;
  show2.innerHTML = msg;


  // 2. 创建一个 Vue 实例
  let vm = new Vue({
    el: '#app',// 选择器的名称，表示当前new vue实例对象要控制页面中的哪一部分（#app）
    data: {
      msg: msg,
      count: 0,
      ok: true,
      message: 'Hello Vue.js 22222222 333333 333333 444444'
    }
  });

</script>
</html>